import { useTtsaStore } from '@/store/ttsa'
import { useTost } from '@/utils/comps'
import { isIos } from '@/utils/client'
import { Ref } from 'vue'
import { MODE } from '@/constants/ttsa'

export default function useInputFocus() {
  const ttsaStore = useTtsaStore()
  const inputVisible: Ref = inject('inputVisible')
  const unfinishedText = ref('')
  const text = ref('')
  const inputBox = ref()
  const input = ref()
  const inputPositionY = ref(0)
  const windowRealHeight = window.innerHeight
  const bodyElement = document.body

  const onBlur = () => {
    inputVisible.value = false
    inputPositionY.value = 0
    bodyElement.removeEventListener("touchmove", preventDefault)
    if (isIos()) document.body.classList.remove('ios-app')
    // 存储未完成的文本
    if (text.value) {
      unfinishedText.value = text.value
      text.value = ''
    }
    const video: HTMLMediaElement = document.querySelector('#ttsa video')
    if (video) video.muted = false
  }

  const preventDefault = (evnet) => {
    if (!inputBox.value.contains(event.target)) evnet.preventDefault()
  }

  const handBlur = () => {
    input.value.blur()
  }

  const onFocus = async () => {
    inputVisible.value = true
    if (ttsaStore.mode !== MODE.QA) ttsaStore.explainToQa()
    // 未完成的文本写入
    if (unfinishedText.value) {
      text.value = unfinishedText.value
      unfinishedText.value = ''
    }
    bodyElement.addEventListener("touchmove", preventDefault, { passive: false })
    if (isIos()) document.body.classList.add('ios-app')
  }

  const send = (tx?, tId?) => {
    const s = tx || text.value || ''
    if (!s.trim()) {
      useTost('请勿发送空内容')
      return
    }
    text.value = ''
    handBlur()
    ttsaStore.voiceActiveId = tId
    ttsaStore.chat(s.trim())
      .catch(() => useTost('未匹配到问题答案'))
  }

  const onResize = () => {
    if (windowRealHeight > window.innerHeight) {
      bodyElement.style.height = windowRealHeight + 'px'
    } else {
      bodyElement.style.height = ''
      handBlur()
    }
  }

  const onVisibilityChange = () => {
    console.log('document.hidden', document.hidden);
    if (isIos() && !document.hidden) handBlur()
  }

  const setPY = () => {
    if (!isIos()) return
    setTimeout(() => {
      if (windowRealHeight > window.visualViewport.height) {
        inputPositionY.value = windowRealHeight - window.visualViewport.height
        window.scrollTo(0, 0)
      } else {
        handBlur()
      }
    }, 250)
  }

  onMounted(() => {
    window.addEventListener('resize', onResize)
    window.visualViewport.addEventListener("resize", setPY)
    window.visualViewport.addEventListener("scroll", setPY)
    document.addEventListener('visibilitychange', onVisibilityChange)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', onResize)
    window.visualViewport.removeEventListener("resize", setPY)
    window.visualViewport.removeEventListener("scroll", setPY)
    document.removeEventListener('visibilitychange', onVisibilityChange)
  })

  return {
    ttsaStore,
    inputVisible,
    text,
    inputBox,
    inputPositionY,
    input,
    send,
    onFocus,
    onBlur
  }
}

